<!--党建测评管理页面-->
<template>
  <div class="partyBuildingEvaluation">
    <!--党建测评侧边栏-->
    <div class="partyBuildingEvaluation-sidebar">
      <div class="sidebar-logo">
        <img :src="logo" class="sidebar-logo" alt="" />
        <h1 class="sidebar-title">党建测评</h1>
      </div>
      <div class="sidebar-menu">
        <router-link
          class="menu-item"
          :class="{ menuActive: item.name === routeConfiguration.name }"
          v-for="item in navigationBar"
          :key="item.name"
          :to="{ name: item.name }"
          @click="activeIndex = item.name"
        >
          <el-icon><Menu /></el-icon>
          <div>{{ item.title }}</div>
        </router-link>
      </div>
    </div>
    <!--党建测评列表-->
    <div class="partyBuildingEvaluation-main">
      <router-view class="main-component"></router-view>
    </div>
  </div>
</template>
<script setup>
import { DEFAULT_OPTION, DEFAULT_TAG_TITLE } from "@/utils/mockConfiguration/mockConfig";
document.title = DEFAULT_TAG_TITLE;
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
const router = useRouter();
const routeConfiguration = ref(router.currentRoute); //当前路由配置
import logo from "@/assets/logo/logo.png";

const activeIndex = ref(DEFAULT_OPTION); //默认选中第一个
const navigationBar = [
  {
    title: "模板管理",
    name: "templates",
  },
  {
    title: "下发管理",
    name: "evaluation",
  },
  {
    title: "群组管理",
    name: "group",
  },
];
const ADMINISTRATOR = "partyAdmin"; //后台管理员身份标识
onMounted(() => {
  //判断是否是管理员
  const roleKeys = useUserStore().user.roles.map(item => item.roleKey);
  if (!roleKeys.includes(ADMINISTRATOR)) {
    //跳转到错误页面
    router.push({ name: "error" });
  }
});
</script>

<style lang="less" scoped>
.partyBuildingEvaluation {
  width: 100vw;
  height: 100vh;
  display: flex;

  .partyBuildingEvaluation-sidebar {
    width: 200px;
    min-width: 200px;
    height: 100%;
    margin-right: 10px;
    background-color: rgb(48, 65, 86);
    .sidebar-logo {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
      }
      h1 {
        display: inline-block;
        color: #fff;
        font-weight: 600;
        font-size: @fontSize;
        font-family:
          Avenir,
          Helvetica Neue,
          Arial,
          Helvetica,
          sans-serif;
        vertical-align: middle;
      }
    }
    .sidebar-menu {
      display: flex;
      flex-direction: column;
      .menu-item {
        height: 56px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        column-gap: 16px;
        color: #bfcbd9;
        font-size: @fontSize;
        font-weight: 500;
        &:hover {
          background-color: rgb(38, 52, 69);
        }
      }
      .menuActive {
        color: #409eff;
      }
    }
  }
  .partyBuildingEvaluation-main {
    flex: 1;
  }
}
</style>
